<!DOCTYPE html>
<html>
  <head>
    <title>CAMBO-MAP</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="<?php echo base_url().TEMPLATE_FRONEND_PATH.SITE_NAME?>/css/bootstrap.min.css" rel="stylesheet">
    <link href="<?php echo base_url().TEMPLATE_FRONEND_PATH.SITE_NAME?>/css/bootstrap.css" rel="stylesheet">
    <link href="<?php echo base_url().TEMPLATE_FRONEND_PATH.SITE_NAME?>/css/inputstyle.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="<?php echo base_url().TEMPLATE_FRONEND_PATH.SITE_NAME?>/js/jquery.min.js"></script>
    <script type="text/javascript" src="<?php echo base_url().TEMPLATE_FRONEND_PATH.SITE_NAME?>/js/login_ajax.js"></script>
    <script>
	$(document).ready(function(){
		$("#panel").hide();
			$("#left_right").click(function(){
			    var p=$("#panel");
				var m=$("#map");
				p.show();
				var cls=$("#sp").attr('class');
				if(cls=='glyphicon glyphicon-arrow-right'){
					
				p.animate({width:'23%',opacity:'1'},1000);
    			m.animate({width:'77%',opacity:'1'},100,function(){
				$("#sp").attr('class','glyphicon glyphicon-arrow-left');
				});
					
				}else{
					p.animate({width:'0px',opacity:'1'},100,function(){$("#panel").hide();});
					m.animate({width:'100%',opacity:'1'},1000,function(){
					
				   $("#sp").attr('class','glyphicon glyphicon-arrow-right');
				});
				}
			});
  //slide up down
  $("#p_updown").hide();
    	$("#hide_show").click(function(){
			var arrow_down=$("#up_down").attr('class');
   		 $("#p_updown").slideToggle("slow",function(){
			 if(arrow_down=='glyphicon glyphicon-chevron-down'){
				 $("#up_down").attr('class','glyphicon glyphicon-chevron-up');
			 }
			 else{
				 $("#up_down").attr('class','glyphicon glyphicon-chevron-down');
			 }
			 });
  	});
});
	</script>   
    <style>
		#panel{
			border:1px solid #d9d9d9;
			height:530px;
			width:0px;
			float:left;
			overflow:auto;
			white-space:nowrap;
		}
		#panel #pheader{
			padding:5px 0 5px 5px;
			height:25px;
			width:100%;
			background-color:#e5e5e5;
		}
		#panel #pheader span{
			float:right;
		}
	    #panel #pheader span:hover{
			float:right;
		}
		#sp{
			position:absolute;
			z-index:100px;
		}
		#map{
			float:right;
			width:100%;
			height:530px;
			background-color:#CCC;

		}
#sp:hover{
			cursor:pointer;
		}
			
	</style>
    <script>
	$(document).ready(function(e) {
$('#popover_login').popover({
    html: true,
    title: 'User Login <a class="close" href="#");">&times;</a>',
    content: function() {
      return $(".login_box").html();
    }
});

$('#popover_login').click(function (e) {
    e.stopPropagation();
    $('#popover_register').popover('hide');
});

$(document).click(function (e) {
    if ($(e.target).is('.close')) {
        $('#popover_login').popover('hide');
    }
});

    });

	</script>
  <!-- register for login -->  
        <script>
	$(document).ready(function(e) {
$('#popover_register').popover({
    html: true,
    title: 'User Register <a class="close" href="#");">&times;</a>',
    content: function() {
      return $(".register_box").html();
    }
});

$('#popover_register').click(function (e) {
    e.stopPropagation();
    $('#popover_login').popover('hide');
});

$(document).click(function (e) {
    if ($(e.target).is('.close')) {
        $('#popover_register').popover('hide');
    }
});

    });

	</script>
  </head>
  <body>

       <!-- Fixed navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">CAMBO-MAP</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
            <li><a href="#about"><span class="glyphicon glyphicon-info-sign"></span> About</a></li>
            <li><a href="#contact"><span class="glyphicon glyphicon-earphone"></span> Contact</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-share-alt"></span> Subscribe</a></li>
            <?php if($this->session->userdata('use_id')){ ?>
            <li><a href="#"><span class="glyphicon glyphicon-log-in" ></span> Logout</a></li>
            <?php }else{?>
             <li><a href="#" id="popover_login" data-placement="bottom" data-container="body"><span class="glyphicon glyphicon-log-in" ></span> Login</a></li>
            <?php }?> 
            <li><a href="#" id="popover_register" data-placement="bottom" data-container="body"><span class="glyphicon glyphicon-registration-mark"></span> Register</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
<main class="bs-masthead" id="content" role="main" style="margin-top:52px;">
<div class="row" style="margin:0; padding:0; background:url(images/subtle_dots.png) repeat;">
<div class="row" style="padding:0; margin:0;">
<div class="col-xs-12 col-sm-6 col-md-12" align="center" style="color:#F00; font-size:11px;">
<a href="#" id="hide_show"><span class="glyphicon glyphicon-chevron-down" id="up_down"></span></a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-12" style="border-bottom:1px  dotted #666;" id="p_updown">
<form action="" method="post" style="margin:0 0 8px; 50px;">
<input type="text" name="search"  required="required" placeholder="Search......"/>
<select name="category">
	<option> Select Category </option>
</select>
<input type="submit" value="Search" name="search" /><span style="margin:0 50px 0 50px;"></span>

<input type="text" name="house"  required="required" placeholder="House Number"/>
<input type="text" name="street"  required="required" placeholder="Street Number"/>
<select name="category">
	<option> Select Province </option>
</select>
<select name="category">
	<option> Select District </option>
</select>
<select name="category">
	<option> Select Commune </option>
</select>
<input type="submit" value="Search" name="searchgroup" />

</form>
</div>

</div>
<div class="row" style="padding:0; margin:0;">
 <div class="col-xs-12 col-sm-8 col-md-12" style="padding:0; margin:0;">
      <a href="#" id="left_right"><span class="glyphicon glyphicon-arrow-right" id="sp"></span></a>
      		<div id="panel">
            	<div id="pheader">
                </div>
                <div id="pcontent"
                <form action="" method="post" style="margin:0 0 8px; 50px;">
					<input type="text" name="search"  required="required" placeholder="Search......"/>
					<select name="category">
					<option> Select Category </option>
					</select>
					</form>
			   </div>
            </div>
            <div id="map"></div>  
      </div>
</div>
<?php include_once 'incs/login.php';?>
<?php include_once 'incs/register.php';?>
</main>
<!-- popover login-->



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="<?php echo base_url().TEMPLATE_FRONEND_PATH.SITE_NAME?>/js/bootstrap.min.js"></script>
    
    
  </body>
</html>
